<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>企业办公协同平台</title>
<script src="https://cdn.tailwindcss.com"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
<script>
tailwind.config = {
theme: {
extend: {
colors: {
primary: '#4CAF50',
secondary: '#2196F3'
},
borderRadius: {
'none': '0px',
'sm': '2px',
DEFAULT: '4px',
'md': '8px',
'lg': '12px',
'xl': '16px',
'2xl': '20px',
'3xl': '24px',
'full': '9999px',
'button': '4px'
}
}
}
}
</script>
<style>
body {
min-height: 1024px;
width: 1440px;
margin: 0 auto;
}
.sidebar {
width: 250px;
background-color: #1a1a1a;
position: relative;
}
.chat-list-item:hover {
background-color: rgba(255,255,255,0.1);
}
.message-input:focus {
outline: none;
}
.message-bubble {
max-width: 70%;
}
.profile-controls {
display: none;
position: absolute;
top: 10px;
right: 10px;
background-color: rgba(0, 0, 0, 0.7);
border-radius: 4px;
z-index: 10;
}
.profile-controls button {
width: 24px;
height: 24px;
display: flex;
align-items: center;
justify-content: center;
color: white;
opacity: 0.8;
}
.profile-controls button:hover {
opacity: 1;
}
.sidebar .p-4:first-child:hover .profile-controls {
display: flex;
}
.profile-popup {
display: none;
position: absolute;
top: 60px;
left: 20px;
background-color: #fff;
border-radius: 4px;
box-shadow: 0 2px 8px rgba(0,0,0,0.15);
padding: 12px;
z-index: 20;
width: 200px;
}
.profile-popup .user-info {
border-bottom: 1px solid #eee;
padding-bottom: 8px;
margin-bottom: 8px;
}
.sidebar .p-4:first-child:hover .profile-popup {
display: block;
}
</style>
<script>
    function viewMeetingMinutes() {
    const modalHtml = `
    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-2/3 max-h-[80vh]">
    <div class="p-6 border-b flex justify-between items-center">
    <h3 class="text-xl font-medium">2024年第一季度业务规划会 - 会议纪要</h3>
    <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
    <i class="fas fa-times"></i>
    </button>
    </div>
    <div class="p-6 overflow-y-auto max-h-[calc(80vh-76px)]">
    <div class="space-y-6">
    <div class="flex items-center justify-between text-sm text-gray-500">
    <div>会议时间：2024-01-12 10:00-12:00</div>
    <div>记录人：王助理</div>
    </div>
    <div class="space-y-4">
    <div>
    <h4 class="font-medium mb-2">会议主题</h4>
    <p class="text-gray-600">讨论2024年第一季度业务发展规划及目标制定</p>
    </div>
    <div>
    <h4 class="font-medium mb-2">参会人员</h4>
    <div class="flex flex-wrap gap-2">
    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">陈总经理</span>
    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">张副总</span>
    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">李经理</span>
    <span class="px-3 py-1 bg-gray-100 rounded-full text-sm">王助理</span>
    </div>
    </div>
    <div>
    <h4 class="font-medium mb-2">会议纪要</h4>
    <div class="space-y-2">
    <p class="text-gray-600">1. 回顾2023年第四季度业绩完成情况</p>
    <p class="text-gray-600">2. 制定2024年第一季度销售目标和策略</p>
    <p class="text-gray-600">3. 讨论新产品线上线计划和营销方案</p>
    <p class="text-gray-600">4. 人员扩充计划讨论</p>
    </div>
    </div>
    <div>
    <h4 class="font-medium mb-2">会议决议</h4>
    <div class="space-y-2">
    <p class="text-gray-600">1. 确定Q1销售目标为2000万</p>
    <p class="text-gray-600">2. 新产品发布会定于2月底举行</p>
    <p class="text-gray-600">3. 技术部门扩充5人，销售部门扩充3人</p>
    </div>
    </div>
    <div>
    <h4 class="font-medium mb-2">后续行动项</h4>
    <div class="space-y-2">
    <div class="flex items-center justify-between p-2 border rounded-lg">
    <div>
    <div class="font-medium">制定详细的产品发布计划</div>
    <div class="text-sm text-gray-500">负责人：李经理</div>
    </div>
    <div class="text-sm text-gray-500">截止日期：2024-01-19</div>
    </div>
    <div class="flex items-center justify-between p-2 border rounded-lg">
    <div>
    <div class="font-medium">完成招聘计划书</div>
    <div class="text-sm text-gray-500">负责人：王助理</div>
    </div>
    <div class="text-sm text-gray-500">截止日期：2024-01-20</div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    `;
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    }
    function editMeetingMinutes() {
    const modalHtml = `
    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-2/3 max-h-[80vh]">
    <div class="p-6 border-b flex justify-between items-center">
    <h3 class="text-xl font-medium">编辑会议纪要</h3>
    <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
    <i class="fas fa-times"></i>
    </button>
    </div>
    <div class="p-6 overflow-y-auto max-h-[calc(80vh-76px)]">
    <form class="space-y-6">
    <div class="space-y-2">
    <label class="block font-medium">会议主题</label>
    <input type="text" class="w-full px-4 py-2 border rounded-lg" value="2024年第一季度业务规划会">
    </div>
    <div class="space-y-2">
    <label class="block font-medium">参会人员</label>
    <div class="flex flex-wrap gap-2 border rounded-lg p-4">
    <div class="flex items-center space-x-2 bg-gray-100 px-3 py-1 rounded-full">
    <span>陈总经理</span>
    <button type="button" class="text-gray-500 hover:text-red-500">
    <i class="fas fa-times"></i>
    </button>
    </div>
    <div class="flex items-center space-x-2 bg-gray-100 px-3 py-1 rounded-full">
    <span>张副总</span>
    <button type="button" class="text-gray-500 hover:text-red-500">
    <i class="fas fa-times"></i>
    </button>
    </div>
    <button type="button" class="px-3 py-1 border rounded-full hover:border-primary hover:text-primary">
    <i class="fas fa-plus mr-1"></i>添加
    </button>
    </div>
    </div>
    <div class="space-y-2">
    <label class="block font-medium">会议纪要</label>
    <textarea class="w-full px-4 py-2 border rounded-lg h-32">1. 回顾2023年第四季度业绩完成情况
    2. 制定2024年第一季度销售目标和策略
    3. 讨论新产品线上线计划和营销方案
    4. 人员扩充计划讨论</textarea>
    </div>
    <div class="space-y-2">
    <label class="block font-medium">会议决议</label>
    <textarea class="w-full px-4 py-2 border rounded-lg h-32">1. 确定Q1销售目标为2000万
    2. 新产品发布会定于2月底举行
    3. 技术部门扩充5人，销售部门扩充3人</textarea>
    </div>
    <div class="flex justify-end space-x-4">
    <button type="button" onclick="closeModal()" class="px-6 py-2 border text-gray-600 !rounded-button">取消</button>
    <button type="button" onclick="saveMeetingMinutes()" class="px-6 py-2 bg-primary text-white !rounded-button">保存</button>
    </div>
    </form>
    </div>
    </div>
    </div>
    `;
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    }
    function showActivityReview() {
    const mainContent = document.querySelector('.flex-1.flex.flex-col.bg-white');
    const modalHtml = `
    <div class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-3/4 max-h-[80vh]">
    <div class="p-6 border-b flex justify-between items-center">
    <h3 class="text-xl font-medium">新年晚会活动回顾</h3>
    <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
    <i class="fas fa-times"></i>
    </button>
    </div>
    <div class="p-6 overflow-y-auto max-h-[calc(80vh-76px)]">
    <div class="space-y-6">
    <div class="aspect-w-16 aspect-h-9 bg-gray-100 rounded-lg overflow-hidden">
    <img src="https://ai-public.mastergo.com/ai/img_res/a76f8f58b3ac150ab3b3c8e131ebc9e9.jpg" class="object-cover w-full h-full" alt="活动照片">
    </div>
    <div class="grid grid-cols-4 gap-4">
    <img src="https://ai-public.mastergo.com/ai/img_res/1872780d3178fec2f2ae4a59c6b34389.jpg" class="rounded-lg w-full h-48 object-cover" alt="活动照片">
    <img src="https://ai-public.mastergo.com/ai/img_res/1e0daa642d9274ca199cc251887e116f.jpg" class="rounded-lg w-full h-48 object-cover" alt="活动照片">
    <img src="https://ai-public.mastergo.com/ai/img_res/7ab32489dedf4b7cc30db06af1915201.jpg" class="rounded-lg w-full h-48 object-cover" alt="活动照片">
    <img src="https://ai-public.mastergo.com/ai/img_res/5f641a0cb66b74a53f16dc64d0e1dd11.jpg" class="rounded-lg w-full h-48 object-cover" alt="活动照片">
    </div>
    <div class="space-y-4">
    <h4 class="font-medium text-lg">活动简介</h4>
    <p class="text-gray-600 leading-relaxed">
    2024年新年晚会于1月12日在凯悦酒店大宴会厅圆满举行。晚会以"创新引领未来"为主题，包含了年度颁奖、文艺表演、抽奖等精彩环节。现场参与人数达150人，气氛热烈。
    </p>
    <div class="grid grid-cols-3 gap-4 mt-4">
    <div class="bg-gray-50 p-4 rounded-lg">
    <div class="text-2xl font-bold text-primary mb-1">17</div>
    <div class="text-sm text-gray-500">部门参与数</div>
    </div>
    <div class="bg-gray-50 p-4 rounded-lg">
    <div class="text-2xl font-bold text-primary mb-1">150+</div>
    <div class="text-sm text-gray-500">活动参与人数</div>
    </div>
    <div class="bg-gray-50 p-4 rounded-lg">
    <div class="text-2xl font-bold text-primary mb-1">98%</div>
    <div class="text-sm text-gray-500">满意度评分</div>
    </div>
    </div>
    </div>
    <div class="space-y-4">
    <h4 class="font-medium text-lg">精彩瞬间</h4>
    <div class="space-y-3">
    <div class="flex items-center space-x-4">
    <div class="w-2 h-2 bg-primary rounded-full"></div>
    <p class="text-gray-600">开场舞《追梦前行》震撼呈现，展现团队活力</p>
    </div>
    <div class="flex items-center space-x-4">
    <div class="w-2 h-2 bg-primary rounded-full"></div>
    <p class="text-gray-600">年度杰出团队奖项颁发，表彰优秀团队代表</p>
    </div>
    <div class="flex items-center space-x-4">
    <div class="w-2 h-2 bg-primary rounded-full"></div>
    <p class="text-gray-600">互动游戏环节点燃现场气氛，加深团队凝聚力</p>
    </div>
    <div class="flex items-center space-x-4">
    <div class="w-2 h-2 bg-primary rounded-full"></div>
    <p class="text-gray-600">抽奖环节惊喜不断，现场欢呼此起彼伏</p>
    </div>
    </div>
    </div>
    <div class="border-t mt-6 pt-6">
    <div class="space-y-4">
    <h4 class="font-medium text-lg">活动评价</h4>
    <div class="flex items-center space-x-2 mb-4">
    <div class="text-sm text-gray-500">整体评分：</div>
    <div class="flex space-x-1">
    <button onclick="setRating(1)" class="text-2xl text-yellow-400 hover:text-yellow-500">
    <i class="fas fa-star"></i>
    </button>
    <button onclick="setRating(2)" class="text-2xl text-yellow-400 hover:text-yellow-500">
    <i class="fas fa-star"></i>
    </button>
    <button onclick="setRating(3)" class="text-2xl text-yellow-400 hover:text-yellow-500">
    <i class="fas fa-star"></i>
    </button>
    <button onclick="setRating(4)" class="text-2xl text-yellow-400 hover:text-yellow-500">
    <i class="fas fa-star"></i>
    </button>
    <button onclick="setRating(5)" class="text-2xl text-gray-300 hover:text-yellow-500">
    <i class="fas fa-star"></i>
    </button>
    </div>
    <span class="text-sm text-primary ml-2">4.0 分</span>
    </div>
    <div class="space-y-3">
    <textarea class="w-full px-4 py-2 border rounded-lg h-24" placeholder="请输入您对活动的评价和建议..."></textarea>
    <button class="px-4 py-2 bg-primary text-white !rounded-button">
    提交评价
    </button>
    </div>
    <div class="mt-6 space-y-4">
    <div class="text-sm font-medium">最新评价（12条）</div>
    <div class="space-y-4">
    <div class="bg-gray-50 p-4 rounded-lg">
    <div class="flex items-center justify-between mb-2">
    <div class="flex items-center space-x-2">
    <div class="w-8 h-8 rounded-full bg-blue-500 flex items-center justify-center text-white text-sm">张</div>
    <div class="font-medium">张总监</div>
    </div>
    <div class="text-sm text-gray-500">2024-01-13</div>
    </div>
    <div class="flex items-center space-x-1 mb-2">
    <i class="fas fa-star text-yellow-400"></i>
    <i class="fas fa-star text-yellow-400"></i>
    <i class="fas fa-star text-yellow-400"></i>
    <i class="fas fa-star text-yellow-400"></i>
    <i class="fas fa-star text-yellow-400"></i>
    </div>
    <p class="text-gray-600">活动安排非常用心，特别是年度颁奖环节让人印象深刻。希望以后能有更多这样的团建活动。</p>
    </div>
    <div class="bg-gray-50 p-4 rounded-lg">
    <div class="flex items-center justify-between mb-2">
    <div class="flex items-center space-x-2">
    <div class="w-8 h-8 rounded-full bg-green-500 flex items-center justify-center text-white text-sm">王</div>
    <div class="font-medium">王经理</div>
    </div>
    <div class="text-sm text-gray-500">2024-01-13</div>
    </div>
    <div class="flex items-center space-x-1 mb-2">
    <i class="fas fa-star text-yellow-400"></i>
    <i class="fas fa-star text-yellow-400"></i>
    <i class="fas fa-star text-yellow-400"></i>
    <i class="fas fa-star text-yellow-400"></i>
    <i class="fas fa-star text-gray-300"></i>
    </div>
    <p class="text-gray-600">整体体验很好，但是互动游戏环节可以再增加一些。期待下次活动能有更多创新。</p>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    </div>
    `;
    // 添加模态窗口到页面
    const modalContainer = document.createElement('div');
    modalContainer.id = 'activityReviewModal';
    modalContainer.innerHTML = modalHtml;
    document.body.appendChild(modalContainer);
    }
    function showToast(message) {
    const toast = document.createElement('div');
    toast.className = 'fixed top-4 right-4 bg-black bg-opacity-75 text-white px-6 py-3 rounded-lg z-50 flex items-center transform translate-y-0 transition-transform duration-300';
    toast.innerHTML = `
    <i class="fas fa-check-circle mr-2"></i>
    <span>${message}</span>
    `;
    document.body.appendChild(toast);
    setTimeout(() => {
    toast.style.transform = 'translateY(-150%)';
    setTimeout(() => {
    toast.remove();
    }, 300);
    }, 3000);
    }
    function closeModal() {
    const modal = document.getElementById('activityReviewModal');
    const meetingModal = document.getElementById('newMeetingModal');
    if (modal) {
    modal.remove();
    }
    if (meetingModal) {
    meetingModal.remove();
    }
    const editModal = document.querySelector('.fixed.inset-0');
    if (editModal) {
    editModal.remove();
    }
    }
    function saveMeetingMinutes() {
    showToast('保存成功');
    closeModal();
    }
    function showNewMeetingForm() {
    const modalHtml = `
    <div id="newMeetingModal" class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50">
    <div class="bg-white rounded-lg w-2/3 max-h-[80vh] overflow-y-auto">
    <div class="p-6 border-b flex justify-between items-center">
    <h3 class="text-xl font-medium">发起会议</h3>
    <button onclick="closeModal()" class="text-gray-500 hover:text-gray-700">
    <i class="fas fa-times"></i>
    </button>
    </div>
    <div class="p-6">
    <form class="space-y-6" onsubmit="handleSubmitMeeting(event)">
    <div class="space-y-2">
    <label class="block font-medium">会议主题</label>
    <input type="text" class="w-full px-4 py-2 border rounded-lg" placeholder="请输入会议主题">
    </div>
    <div class="space-y-2">
    <label class="block font-medium">会议时间</label>
    <div class="flex space-x-4">
    <input type="datetime-local" class="flex-1 px-4 py-2 border rounded-lg">
    <input type="datetime-local" class="flex-1 px-4 py-2 border rounded-lg">
    </div>
    </div>
    <div class="space-y-2">
    <label class="block font-medium">会议形式</label>
    <div class="flex space-x-4">
    <button type="button" class="flex-1 px-4 py-2 border rounded-lg text-primary border-primary">
    <i class="fas fa-video mr-2"></i>视频会议
    </button>
    <button type="button" class="flex-1 px-4 py-2 border rounded-lg">
    <i class="fas fa-phone mr-2"></i>语音会议
    </button>
    <button type="button" class="flex-1 px-4 py-2 border rounded-lg">
    <i class="fas fa-users mr-2"></i>线下会议
    </button>
    </div>
    </div>
    <div class="space-y-2">
    <label class="block font-medium">会议地点/链接</label>
    <div class="flex space-x-4">
    <input type="text" class="flex-1 px-4 py-2 border rounded-lg" placeholder="线下会议地点或在线会议链接">
    <button type="button" class="px-4 py-2 border text-gray-600 !rounded-button">
    <i class="fas fa-paste mr-2"></i>粘贴
    </button>
    </div>
    </div>
    <div class="space-y-2">
    <label class="block font-medium">参会人员</label>
    <div class="flex flex-wrap gap-2 border rounded-lg p-4">
    <div class="flex items-center space-x-2 bg-primary bg-opacity-10 text-primary px-3 py-1 rounded-full">
    <img src="https://image-resource.mastergo.com/155405551408239/155405551408242/e7264267b5db31a8a081e6caa4469861.png" alt="avatar" class="w-6 h-6 rounded-full">
    <span>陈经理</span>
    <button type="button" class="hover:text-red-500">
    <i class="fas fa-times"></i>
    </button>
    </div>
    <button type="button" class="px-3 py-1 border rounded-full hover:border-primary hover:text-primary">
    <i class="fas fa-plus mr-1"></i>添加成员
    </button>
    </div>
    </div>
    <div class="space-y-2">
    <label class="block font-medium">会议议程</label>
    <textarea class="w-full px-4 py-2 border rounded-lg h-32" placeholder="请输入会议议程..."></textarea>
    </div>
    <div class="flex justify-end space-x-4">
    <button type="button" onclick="closeModal()" class="px-6 py-2 border text-gray-600 !rounded-button">取消</button>
    <button type="submit" class="px-6 py-2 bg-primary text-white !rounded-button">创建会议</button>
    </div>
    </form>
    </div>
    </div>
    </div>
    `;
    document.body.insertAdjacentHTML('beforeend', modalHtml);
    }
    function handleSubmitMeeting(event) {
    event.preventDefault();
    const toast = document.createElement('div');
    toast.className = 'fixed top-4 right-4 bg-black bg-opacity-75 text-white px-6 py-3 rounded-lg z-50 flex items-center transform translate-y-0 transition-transform duration-300';
    toast.innerHTML = `
    <i class="fas fa-check-circle mr-2"></i>
    <span>会议创建成功</span>
    `;
    document.body.appendChild(toast);
    setTimeout(() => {
    toast.style.transform = 'translateY(-150%)';
    setTimeout(() => {
    toast.remove();
    }, 300);
    }, 3000);
    closeModal();
    changeModule('meeting');
    // 添加新会议到会议列表
    const newMeeting = `
    <div class="border rounded-lg p-4">
    <div class="flex justify-between items-center mb-3">
    <div class="font-medium text-lg">产品部例会</div>
    <div class="text-gray-500 px-3 py-1 rounded-full bg-gray-100">未开始</div>
    </div>
    <div class="text-sm text-gray-500 mb-3">会议时间：2024-01-16 10:00-11:00</div>
    <div class="flex items-center justify-between">
    <div class="flex items-center space-x-2">
    <div class="flex -space-x-2">
    <div class="w-6 h-6 rounded-full border-2 border-white bg-blue-500"></div>
    <div class="w-6 h-6 rounded-full border-2 border-white bg-green-500"></div>
    </div>
    <span class="text-sm text-gray-500">2人参会</span>
    </div>
    <button class="px-4 py-2 border text-gray-600 !rounded-button">
    <i class="fas fa-clock mr-2"></i>待开始
    </button>
    </div>
    </div>
    `;
    setTimeout(() => {
    closeModal();
    changeModule('meeting');
    const meetingList = document.querySelector('.flex-1.p-6.overflow-y-auto .space-y-4');
    if (meetingList) {
    meetingList.insertAdjacentHTML('afterbegin', newMeeting);
    }
    }, 1500);
    }
    function setRating(rating) {
    const stars = document.querySelectorAll('.fa-star');
    stars.forEach((star, index) => {
    if (index < rating) {
    star.parentElement.classList.remove('text-gray-300');
    star.parentElement.classList.add('text-yellow-400');
    } else {
    star.parentElement.classList.remove('text-yellow-400');
    star.parentElement.classList.add('text-gray-300');
    }
    });
    }
    function showActivityList() {
    const mainContent = document.querySelector('.flex-1.flex.flex-col.bg-white');
    mainContent.innerHTML = `
    <div class="h-16 flex items-center justify-between px-6 border-b">
    <div class="flex items-center space-x-4">
    <span class="font-medium">企业活动</span>
    </div>
    <div class="flex items-center space-x-4">
    <button class="px-4 py-2 bg-primary text-white !rounded-button" onclick="changeModule('activity')">
    <i class="fas fa-plus mr-2"></i>发布活动
    </button>
    </div>
    </div>
    <div class="flex-1 p-6 overflow-y-auto">
    <div class="space-y-4">
    <div class="space-y-4">
    <div class="border rounded-lg p-4">
    <div class="flex justify-between items-center mb-3">
    <div class="font-medium text-lg">2024 年终团建活动</div>
    <div class="text-primary px-3 py-1 rounded-full bg-primary bg-opacity-10">报名中</div>
    </div>
    <div class="text-sm text-gray-500 mb-3">活动时间：2024-01-20 14:00-18:00</div>
    <div class="text-sm text-gray-500 mb-3">活动地点：阳光度假酒店</div>
    <div class="flex items-center justify-between">
    <div class="flex items-center space-x-2">
    <div class="flex -space-x-2">
    <div class="w-6 h-6 rounded-full border-2 border-white bg-blue-500"></div>
    <div class="w-6 h-6 rounded-full border-2 border-white bg-green-500"></div>
    <div class="w-6 h-6 rounded-full border-2 border-white bg-yellow-500"></div>
    <div class="w-6 h-6 rounded-full border-2 border-white flex items-center justify-center bg-gray-200">
    <span class="text-xs text-gray-600">+5</span>
    </div>
    </div>
    <span class="text-sm text-gray-500">8人已报名</span>
    </div>
    <button class="px-4 py-2 bg-primary text-white !rounded-button">
    立即报名
    </button>
    </div>
    </div>
    <div class="border rounded-lg p-4">
    <div class="flex justify-between items-center mb-3">
    <div class="font-medium text-lg">春季运动会</div>
    <div class="text-gray-500 px-3 py-1 rounded-full bg-gray-100">未开始</div>
    </div>
    <div class="text-sm text-gray-500 mb-3">活动时间：2024-03-15 09:00-17:00</div>
    <div class="text-sm text-gray-500 mb-3">活动地点：市体育中心</div>
    <div class="flex items-center justify-between">
    <div class="flex items-center space-x-2">
    <div class="flex -space-x-2">
    <div class="w-6 h-6 rounded-full border-2 border-white bg-purple-500"></div>
    <div class="w-6 h-6 rounded-full border-2 border-white bg-pink-500"></div>
    <div class="w-6 h-6 rounded-full border-2 border-white flex items-center justify-center bg-gray-200">
    <span class="text-xs text-gray-600">+2</span>
    </div>
    </div>
    <span class="text-sm text-gray-500">4人已报名</span>
    </div>
    <button class="px-4 py-2 border text-gray-600 !rounded-button">
    <i class="fas fa-clock mr-2"></i>待开放
    </button>
    </div>
    </div>
    </div>
    <div class="border rounded-lg p-4">
    <div class="flex justify-between items-center mb-3">
    <div class="font-medium text-lg">新年晚会</div>
    <div class="text-gray-500 px-3 py-1 rounded-full bg-gray-100">已结束</div>
    </div>
    <div class="text-sm text-gray-500 mb-3">活动时间：2024-01-12 18:00-22:00</div>
    <div class="text-sm text-gray-500 mb-3">活动地点：凯悦酒店大宴会厅</div>
    <div class="flex items-center justify-between">
    <div class="flex items-center space-x-2">
    <div class="flex -space-x-2">
    <div class="w-6 h-6 rounded-full border-2 border-white bg-purple-500"></div>
    <div class="w-6 h-6 rounded-full border-2 border-white bg-pink-500"></div>
    <div class="w-6 h-6 rounded-full border-2 border-white flex items-center justify-center bg-gray-200">
    <span class="text-xs text-gray-600">+15</span>
    </div>
    </div>
    <span class="text-sm text-gray-500">17人参与</span>
    </div>
    <button class="px-4 py-2 border text-gray-600 !rounded-button" onclick="showActivityReview()">
    查看回顾
    </button>
    </div>
    </div>
    </div>
    </div>`;
    }
    
    function changeModule(module) {
      // 重置所有按钮样式
      document.querySelectorAll('.sidebar button').forEach(btn => {
        btn.classList.remove('text-primary', 'border-b-2', 'border-primary');
        btn.classList.add('text-gray-400');
      });
      
      // 设置当前选中按钮样式
      const btn = document.getElementById(module + 'Btn');
      btn.classList.remove('text-gray-400');
      btn.classList.add('text-primary', 'border-b-2', 'border-primary');
      
      // 更新右侧内容
      const mainContent = document.querySelector('.flex-1.flex.flex-col.bg-white');
      let content = '';
      
      // 根据模块名称获取对应内容
      switch (module) {
        case 'chat':
          content = getChatContent();
          break;
        case 'attendance':
          content = getAttendanceContent();
          setTimeout(initAttendanceModule, 200);
          break;
        case 'meeting':
          content = getMeetingContent();
          break;
        case 'activity':
          content = getActivityContent();
          break;
        case 'doc':
          content = getDocumentsContent();
          break;
        default:
          content = getChatContent(); // 默认显示聊天模块
          break;
      }
      
      mainContent.innerHTML = content;
    }
    
    //五个子模块

// ... existing code ...
function getChatContent() {
  const html = `
  <div class="h-16 flex items-center justify-between px-6 border-b">
    <div class="flex items-center space-x-4">
      <span class="font-medium" id="group-name"></span>
      <span class="text-sm text-gray-500" id="chat-online-count">加载中...</span>
    </div>
    <div class="flex items-center space-x-4">
      <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
        <i class="fas fa-phone"></i>
      </button>
      <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
        <i class="fas fa-video"></i>
      </button>
      <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
        <i class="fas fa-info-circle"></i>
      </button>
    </div>
  </div>
  <div class="flex-1 p-6 overflow-y-auto bg-gray-50" id="chat-messages-container">
    <div class="flex flex-col space-y-4">
      <div class="flex justify-center">
        <div class="text-center text-sm text-gray-500 px-3 py-1 bg-gray-100 rounded-full">
          正在加载消息...
        </div>
      </div>
    </div>
  </div>
  <div class="p-4 border-t bg-white">
    <div class="flex items-center space-x-2">
      <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
        <i class="fas fa-face-smile"></i>
      </button>
      <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
        <i class="fas fa-image"></i>
      </button>
      <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
        <i class="fas fa-paperclip"></i>
      </button>
      <input id="message-input" type="text" class="flex-1 p-2 border rounded-lg message-input" placeholder="输入消息...">
      <button id="send-message-btn" class="px-4 py-2 bg-primary text-white !rounded-button">发送</button>
    </div>
  </div>`;
  
  setTimeout(() => {
    // 绑定发送按钮事件
    document.getElementById('send-message-btn').addEventListener('click', sendChatMessage);
    document.getElementById('message-input').addEventListener('keypress', function(e) {
      if (e.key === 'Enter') {
        sendChatMessage();
      }
    });
    
    // 加载消息
    loadChatMessages();
  }, 10);
  
  return html;
}

// 加载聊天消息
function loadChatMessages(conversationId = currentConversationId) {
  const accessToken = localStorage.getItem('access_token');
  const refreshToken = localStorage.getItem('refresh_token');
  
  if (!accessToken || !refreshToken) {
    showChatError('未检测到登录信息，请重新登录');
    return;
  }
  
  fetch(`http://localhost:3000/api/v1/chat/messages/${conversationId}?limit=20&offset=0`, {
    method: 'GET',
    headers: {
      'Access_token': accessToken,
      'Refresh_token': refreshToken
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200 && Array.isArray(data.data)) {
      renderChatMessages(data.data.reverse());
      updateOnlineStatus(data.data);
    } else {
      showChatError(data.message || '加载消息失败');
    }
  })
  .catch(error => {
    console.error('加载聊天消息失败:', error);
    showChatError('网络错误，无法加载聊天消息');
  });
}

// 渲染聊天消息
function renderChatMessages(messages) {
  const container = document.getElementById('chat-messages-container');
  if (!container) return;
  
  const currentUserId = 1; // 假设当前用户ID为1，实际应从用户会话中获取
  let messagesHTML = '<div class="flex flex-col space-y-4">';
  
  messages.forEach(message => {
    const isCurrentUser = message.sender_id === currentUserId;
    const avatarClass = isCurrentUser ? 'bg-green-500' : 'bg-blue-500';
    const avatarText = message.sender_name.charAt(0);
    const messageClass = isCurrentUser ? 'bg-primary text-white' : 'bg-white';
    const timeClass = isCurrentUser ? 'text-gray-100' : 'text-gray-400';
    const alignClass = isCurrentUser ? 'flex-row-reverse' : '';
    
    // 格式化时间
    const messageTime = new Date(message.created_at);
    const timeStr = `${String(messageTime.getHours()).padStart(2, '0')}:${String(messageTime.getMinutes()).padStart(2, '0')}`;
    
    messagesHTML += `
      <div class="flex items-start space-x-3 ${alignClass} ${isCurrentUser ? 'space-x-reverse' : ''}">
        <div class="w-8 h-8 rounded-full ${avatarClass} flex-shrink-0 flex items-center justify-center text-white">${avatarText}</div>
        <div class="message-bubble ${messageClass} rounded-lg p-3 shadow">
          <div class="text-sm">${message.content}</div>
          <div class="text-xs ${timeClass} mt-1">${timeStr}</div>
        </div>
      </div>
    `;
  });
  
  messagesHTML += '</div>';
  
  container.innerHTML = messagesHTML;
  
  // 滚动到底部
  container.scrollTop = container.scrollHeight;
}

// 更新在线人数
function updateOnlineStatus(messages) {
  const uniqueUsers = new Set();
  messages.forEach(message => {
    uniqueUsers.add(message.sender_id);
  });
  
  const onlineCountEl = document.getElementById('chat-online-count');
  if (onlineCountEl) {
    onlineCountEl.textContent = `${uniqueUsers.size}人在线`;
  }
}

// 显示聊天错误
function showChatError(message) {
  const container = document.getElementById('chat-messages-container');
  if (container) {
    container.innerHTML = `
      <div class="flex justify-center items-center h-full">
        <div class="text-center text-red-500">
          <i class="fas fa-exclamation-circle text-xl mb-2"></i>
          <p>${message}</p>
        </div>
      </div>
    `;
  }
}

// 发送聊天消息
function sendChatMessage() {
  const messageInput = document.getElementById('message-input');
  const message = messageInput.value.trim();
  
  if (!message) return;
  
  const accessToken = localStorage.getItem('access_token');
  const refreshToken = localStorage.getItem('refresh_token');
  
  if (!accessToken || !refreshToken) {
    showToast('未检测到登录信息，请重新登录');
    return;
  }
  
  fetch('http://localhost:3000/api/v1/chat/message', {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Access_token': accessToken,
      'Refresh_token': refreshToken
    },
    body: JSON.stringify({
      conversation_id: currentConversationId,
      content: message,
      content_type: 'text'
    })
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200) {
      // 清空输入框
      messageInput.value = '';
      // 重新加载消息
      loadChatMessages();
    } else {
      showToast(data.message || '发送消息失败');
    }
  })
  .catch(error => {
    console.error('发送消息失败:', error);
    showToast('网络错误，无法发送消息');
  });
}

   
// 考勤模块内容
function getAttendanceContent() {
  return `
  <div class="h-16 flex items-center justify-between px-6 border-b">
    <div class="flex items-center space-x-4">
      <span class="font-medium">考勤管理</span>
    </div>
    <div class="flex items-center space-x-4">
      <button id="attendanceCheckButton" class="px-4 py-2 bg-primary text-white !rounded-button">
        <i class="fas fa-clock mr-2"></i>打卡签到
      </button>
    </div>
  </div>
  <div class="flex-1 p-6 overflow-y-auto">
    <div class="grid grid-cols-3 gap-4">
      <div class="col-span-2 border rounded-lg p-4">
        <div class="flex items-center justify-between mb-4">
          <div class="text-lg font-medium">考勤日历</div>
          <div class="flex items-center space-x-2">
            <button id="prevMonthBtn" class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
              <i class="fas fa-chevron-left"></i>
            </button>
            <span id="currentMonthDisplay" class="font-medium">加载中...</span>
            <button id="nextMonthBtn" class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
              <i class="fas fa-chevron-right"></i>
            </button>
          </div>
        </div>
        <div class="grid grid-cols-7 gap-4">
          <div class="text-center text-sm text-gray-500">周一</div>
          <div class="text-center text-sm text-gray-500">周二</div>
          <div class="text-center text-sm text-gray-500">周三</div>
          <div class="text-center text-sm text-gray-500">周四</div>
          <div class="text-center text-sm text-gray-500">周五</div>
          <div class="text-center text-sm text-gray-500">周六</div>
          <div class="text-center text-sm text-gray-500">周日</div>
          <div id="calendar-days" class="col-span-7 grid grid-cols-7 gap-4">
            <div class="text-center py-4">加载中...</div>
          </div>
        </div>
      </div>
      <div class="col-span-1 space-y-4">
        <div class="border rounded-lg p-4">
          <div class="text-lg font-medium mb-4">本月出勤统计</div>
          <div class="space-y-4">
            <div class="flex justify-between items-center">
              <div class="text-sm text-gray-500">已出勤天数</div>
              <div id="attended-days" class="text-lg font-bold text-primary">-</div>
            </div>
            <div class="flex justify-between items-center">
              <div class="text-sm text-gray-500">迟到次数</div>
              <div id="late-count" class="text-lg font-bold text-yellow-500">-</div>
            </div>
            <div class="flex justify-between items-center">
              <div class="text-sm text-gray-500">早退次数</div>
              <div id="early-leave-count" class="text-lg font-bold text-orange-500">-</div>
            </div>
            <div class="flex justify-between items-center">
              <div class="text-sm text-gray-500">旷工天数</div>
              <div id="absent-days" class="text-lg font-bold text-red-500">-</div>
            </div>
          </div>
        </div>
        <div class="border rounded-lg p-4">
          <div class="text-lg font-medium mb-4">今日打卡记录</div>
          <div class="space-y-2">
            <div class="flex justify-between items-center">
              <div>
                <div class="font-medium">上班打卡</div>
                <div id="check-in-time" class="text-sm text-gray-500">-</div>
              </div>
              <span id="check-in-status" class="text-gray-400">未打卡</span>
            </div>
            <div class="flex justify-between items-center">
              <div>
                <div class="font-medium">下班打卡</div>
                <div id="check-out-time" class="text-sm text-gray-500">-</div>
              </div>
              <span id="check-out-status" class="text-gray-400">未打卡</span>
            </div>
          </div>
        </div>
        <div class="border rounded-lg p-4">
          <div class="text-lg font-medium mb-4">考勤状态说明</div>
          <div class="space-y-2">
            <div class="flex items-center space-x-2">
              <div class="w-3 h-3 rounded-full bg-primary bg-opacity-40"></div>
              <span class="text-sm text-gray-600">正常出勤</span>
            </div>
            <div class="flex items-center space-x-2">
              <div class="w-3 h-3 rounded-full bg-yellow-100"></div>
              <span class="text-sm text-gray-600">迟到</span>
            </div>
            <div class="flex items-center space-x-2">
              <div class="w-3 h-3 rounded-full bg-orange-100"></div>
              <span class="text-sm text-gray-600">早退</span>
            </div>
            <div class="flex items-center space-x-2">
              <div class="w-3 h-3 rounded-full bg-red-100"></div>
              <span class="text-sm text-gray-600">旷工</span>
            </div>
            <div class="flex items-center space-x-2">
              <div class="w-3 h-3 rounded-full bg-gray-100"></div>
              <span class="text-sm text-gray-600">休息日</span>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>`;
}

// 设置当前年月
let currentYear = new Date().getFullYear();
let currentMonth = new Date().getMonth() + 1;

// 初始化考勤模块
function initAttendanceModule() {
  const checkButton = document.getElementById('attendanceCheckButton');
  const prevMonthBtn = document.getElementById('prevMonthBtn');
  const nextMonthBtn = document.getElementById('nextMonthBtn');
  
  if (checkButton) {
    checkButton.addEventListener('click', handleAttendanceCheck);
  }
  
  if (prevMonthBtn) {
    prevMonthBtn.addEventListener('click', () => navigateMonth(-1));
  }
  
  if (nextMonthBtn) {
    nextMonthBtn.addEventListener('click', () => navigateMonth(1));
  }
  
  // 加载考勤数据
  loadTodayAttendanceRecord();
  loadMonthlyStats(currentYear, currentMonth);
  renderCalendar(currentYear, currentMonth);
}

// 加载今日打卡记录
function loadTodayAttendanceRecord() {
  const checkInTime = document.getElementById('check-in-time');
  const checkInStatus = document.getElementById('check-in-status');
  const checkOutTime = document.getElementById('check-out-time');
  const checkOutStatus = document.getElementById('check-out-status');
  const checkButton = document.getElementById('attendanceCheckButton');
  
  if (!checkInTime || !checkInStatus || !checkOutTime || !checkOutStatus || !checkButton) {
    return;
  }
  
  fetch('http://localhost:3000/api/v1/attendance/today', {
    method: 'GET',
    headers: {
      'Access_token': localStorage.getItem('access_token'),
      'Refresh_token': localStorage.getItem('refresh_token')
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200 && data.data.has_record) {
      const record = data.data.record;
      
      // 更新上班打卡信息
      if (record.check_in_time) {
        const checkInDate = new Date(record.check_in_time);
        checkInTime.textContent = checkInDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        checkInStatus.textContent = record.status === 'late' ? '迟到' : '正常';
        checkInStatus.className = record.status === 'late' ? 'text-yellow-500' : 'text-green-500';
      }
      
      // 更新下班打卡信息
      if (record.check_out_time) {
        const checkOutDate = new Date(record.check_out_time);
        checkOutTime.textContent = checkOutDate.toLocaleTimeString([], {hour: '2-digit', minute:'2-digit'});
        checkOutStatus.textContent = record.status === 'early_leave' ? '早退' : '正常';
        checkOutStatus.className = record.status === 'early_leave' ? 'text-orange-500' : 'text-green-500';
        
        // 两次都打过卡，禁用按钮
        checkButton.disabled = true;
        checkButton.classList.add('opacity-50');
        checkButton.textContent = '今日已完成打卡';
      } else {
        // 只打过上班卡，下一步是打下班卡
        checkButton.textContent = '下班打卡';
      }
    } else {
      // 没有记录，下一步是打上班卡
      checkButton.textContent = '上班打卡';
    }
  })
  .catch(error => {
    console.error('获取今日打卡记录失败:', error);
  });
}

// 加载月度统计
function loadMonthlyStats(year, month) {
  const attendedDays = document.getElementById('attended-days');
  const lateCount = document.getElementById('late-count');
  const earlyLeaveCount = document.getElementById('early-leave-count');
  const absentDays = document.getElementById('absent-days');
  const currentMonthDisplay = document.getElementById('currentMonthDisplay');
  
  if (!attendedDays || !lateCount || !earlyLeaveCount || !absentDays || !currentMonthDisplay) {
    return;
  }
  
  // 更新显示的年月
  currentMonthDisplay.textContent = `${year} 年 ${month} 月`;
  
  fetch(`http://localhost:3000/api/v1/attendance/monthly-stats?year=${year}&month=${month}`, {
    method: 'GET',
    headers: {
      'Access_token': localStorage.getItem('access_token'),
      'Refresh_token': localStorage.getItem('refresh_token')
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200) {
      const stats = data.data.stats;
      attendedDays.textContent = stats.attended_days;
      lateCount.textContent = stats.late_count;
      earlyLeaveCount.textContent = stats.early_leave_count;
      absentDays.textContent = stats.absent_days;
    }
  })
  .catch(error => {
    console.error('获取月度统计失败:', error);
  });
}

// 渲染日历
function renderCalendar(year, month) {
  const calendarDays = document.getElementById('calendar-days');
  
  if (!calendarDays) {
    return;
  }
  
  calendarDays.innerHTML = '<div class="text-center py-4">加载中...</div>';
  
  fetch(`http://localhost:3000/api/v1/attendance/history`, {
    method: 'GET',
    headers: {
      'Access_token': localStorage.getItem('access_token'),
      'Refresh_token': localStorage.getItem('refresh_token')
    }
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200) {
      const records = data.data.records;
      
      // 将记录按日期映射
      const recordMap = {};
      
      records.forEach(record => {
        const date = new Date(record.work_date);
        if (date.getFullYear() === year && date.getMonth() + 1 === month) {
          recordMap[date.getDate()] = record;
        }
      });
      
      // 获取月份的天数和第一天是星期几
      const firstDay = new Date(year, month - 1, 1);
      const lastDay = new Date(year, month, 0);
      const daysInMonth = lastDay.getDate();
      
      // 获取第一天是星期几 (0-6, 0是星期日)
      let firstDayOfWeek = firstDay.getDay();
      // 转换为周一为1，周日为7
      firstDayOfWeek = firstDayOfWeek === 0 ? 7 : firstDayOfWeek;
      
      // 生成日历HTML
      let calendarHTML = '';
      
      // 添加空白格子到第一天
      for (let i = 1; i < firstDayOfWeek; i++) {
        calendarHTML += `<div class="text-center py-4 text-gray-400"></div>`;
      }
      
      // 添加天数
      for (let day = 1; day <= daysInMonth; day++) {
        const currentDate = new Date(year, month - 1, day);
        const dayOfWeek = currentDate.getDay();
        const isWeekend = dayOfWeek === 0 || dayOfWeek === 6;
        const record = recordMap[day];
        
        // 判断状态和样式
        let statusClass = '';
        let statusText = '';
        
        if (isWeekend) {
          // 周末
          calendarHTML += `<div class="text-center py-4 text-gray-400">${day}</div>`;
        } else if (record) {
          // 有考勤记录
          switch(record.status) {
            case 'normal':
              statusClass = 'bg-primary bg-opacity-10';
              statusText = '正常';
              break;
            case 'late':
              statusClass = 'bg-yellow-100';
              statusText = '迟到';
              break;
            case 'early_leave':
              statusClass = 'bg-orange-100';
              statusText = '早退';
              break;
            default:
              statusClass = 'bg-primary bg-opacity-10';
              statusText = '正常';
          }
          
          const today = new Date();
          const isToday = today.getFullYear() === year && 
                          today.getMonth() + 1 === month && 
                          today.getDate() === day;
          
          if (isToday) {
            statusText = '今日';
          }
          
          calendarHTML += `
            <div class="text-center py-4 border rounded-lg ${statusClass}">
              <div>${day}</div>
              <div class="text-xs text-${isToday ? 'primary' : statusText === '迟到' ? 'yellow-600' : statusText === '早退' ? 'orange-600' : 'primary'} mt-1">${statusText}</div>
            </div>`;
        } else {
          // 工作日但无记录
          calendarHTML += `<div class="text-center py-4">${day}</div>`;
        }
      }
      
      // 添加月末的空白格子
      const lastDayOfWeek = lastDay.getDay() || 7;
      for (let i = lastDayOfWeek; i < 7; i++) {
        calendarHTML += `<div class="text-center py-4 text-gray-400"></div>`;
      }
      
      calendarDays.innerHTML = calendarHTML;
    }
  })
  .catch(error => {
    console.error('渲染日历出错:', error);
    calendarDays.innerHTML = '<div class="text-center py-4 text-red-500">加载日历失败</div>';
  });
}

// 处理打卡
function handleAttendanceCheck() {
  const checkButton = document.getElementById('attendanceCheckButton');
  
  if (!checkButton) {
    return;
  }
  
  const isCheckIn = checkButton.textContent.includes('上班');
  const endpoint = isCheckIn ? 'http://localhost:3000/api/v1/attendance/check-in' : 'http://localhost:3000/api/v1/attendance/check-out';
  
  fetch(endpoint, {
    method: 'POST',
    headers: {
      'Content-Type': 'application/json',
      'Access_token': localStorage.getItem('access_token'),
      'Refresh_token': localStorage.getItem('refresh_token')
    },
    body: JSON.stringify({ remarks: isCheckIn ? '正常上班' : '完成工作' })
  })
  .then(response => response.json())
  .then(data => {
    if (data.code === 200) {
      // 打卡成功，刷新数据
      loadTodayAttendanceRecord();
      loadMonthlyStats(currentYear, currentMonth);
      renderCalendar(currentYear, currentMonth);
      
      // 显示成功提示
      alert(isCheckIn ? '上班打卡成功！' : '下班打卡成功！');
    } else {
      alert(`打卡失败：${data.message}`);
    }
  })
  .catch(error => {
    console.error('打卡请求失败:', error);
    alert('打卡请求失败，请稍后重试');
  });
}

// 月份导航
function navigateMonth(diff) {
  let newMonth = currentMonth + diff;
  let newYear = currentYear;
  
  if (newMonth > 12) {
    newMonth = 1;
    newYear++;
  } else if (newMonth < 1) {
    newMonth = 12;
    newYear--;
  }
  
  currentYear = newYear;
  currentMonth = newMonth;
  
  loadMonthlyStats(currentYear, currentMonth);
  renderCalendar(currentYear, currentMonth);
}


    
    // 会议模块内容
    function getMeetingContent() {
      return `
      <div class="h-16 flex items-center justify-between px-6 border-b">
        <div class="flex items-center space-x-4">
          <span class="font-medium">会议管理</span>
        </div>
        <div class="flex items-center space-x-4">
          <button onclick="showNewMeetingForm()" class="px-4 py-2 bg-primary text-white !rounded-button">
            <i class="fas fa-plus mr-2"></i>发起会议
          </button>
        </div>
      </div>
      <div class="flex-1 p-6 overflow-y-auto">
        <div class="space-y-6">
          <div>
            <div class="mb-4 flex items-center justify-between">
              <h3 class="text-lg font-medium">今日会议</h3>
              <button class="text-sm text-gray-500 hover:text-gray-700">查看全部</button>
            </div>
            <div class="space-y-4">
              <div class="border rounded-lg p-4 bg-primary bg-opacity-5">
                <div class="flex justify-between mb-2">
                  <div class="flex items-center space-x-2">
                    <i class="fas fa-video text-primary"></i>
                    <span class="font-medium">新产品发布会准备讨论</span>
                  </div>
                  <div class="text-sm text-primary px-2 py-1 bg-primary bg-opacity-10 rounded">进行中</div>
                </div>
                <div class="flex justify-between text-sm text-gray-500 mb-4">
                  <div>14:00 - 15:30</div>
                  <div>主持人：张三</div>
                </div>
                <div class="flex justify-between">
                  <div class="flex space-x-1">
                    <div class="w-6 h-6 rounded-full bg-blue-500"></div>
                    <div class="w-6 h-6 rounded-full bg-green-500"></div>
                    <div class="w-6 h-6 rounded-full bg-yellow-500"></div>
                    <div class="w-6 h-6 rounded-full bg-purple-500 flex items-center justify-center text-white text-xs">+5</div>
                  </div>
                  <div>
                    <button class="px-3 py-1 bg-primary text-white rounded-lg text-sm">加入会议</button>
                  </div>
                </div>
              </div>
              <div class="border rounded-lg p-4">
                <div class="flex justify-between mb-2">
                  <div class="flex items-center space-x-2">
                    <i class="fas fa-handshake text-blue-500"></i>
                    <span class="font-medium">客户需求沟通会议</span>
                  </div>
                  <div class="text-sm text-gray-500 px-2 py-1 bg-gray-100 rounded">未开始</div>
                </div>
                <div class="flex justify-between text-sm text-gray-500 mb-4">
                  <div>16:00 - 17:00</div>
                  <div>主持人：李四</div>
                </div>
                <div class="flex justify-between">
                  <div class="flex space-x-1">
                    <div class="w-6 h-6 rounded-full bg-red-500"></div>
                    <div class="w-6 h-6 rounded-full bg-green-500"></div>
                    <div class="w-6 h-6 rounded-full bg-teal-500"></div>
                  </div>
                  <div>
                    <button class="px-3 py-1 border border-primary text-primary rounded-lg text-sm">设置提醒</button>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div>
            <div class="mb-4 flex items-center justify-between">
              <h3 class="text-lg font-medium">会议记录</h3>
              <div class="flex items-center space-x-2">
                <select class="border px-2 py-1 rounded text-sm text-gray-500">
                  <option>全部类型</option>
                  <option>视频会议</option>
                  <option>电话会议</option>
                  <option>线下会议</option>
                </select>
                <select class="border px-2 py-1 rounded text-sm text-gray-500">
                  <option>本周</option>
                  <option>本月</option>
                  <option>上个月</option>
                </select>
              </div>
            </div>
            <div class="space-y-4">
              <div class="border rounded-lg p-4">
                <div class="flex justify-between mb-2">
                  <div class="flex items-center space-x-2">
                    <i class="fas fa-users text-orange-500"></i>
                    <span class="font-medium">团队周会</span>
                  </div>
                  <div class="text-sm text-gray-500">2024-01-08</div>
                </div>
                <div class="text-sm text-gray-500 mb-4">主持人：王五 | 时长：1小时20分钟</div>
                <div class="text-sm mb-4">讨论了本周工作进展和下周计划，确定了新产品发布的时间表。</div>
                <div class="flex justify-between">
                  <div class="flex space-x-2">
                    <div class="px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">周会</div>
                    <div class="px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">产品</div>
                  </div>
                  <button class="text-primary text-sm">查看详情</button>
                </div>
              </div>
              <div class="border rounded-lg p-4">
                <div class="flex justify-between mb-2">
                  <div class="flex items-center space-x-2">
                    <i class="fas fa-file-signature text-purple-500"></i>
                    <span class="font-medium">合同评审会议</span>
                  </div>
                  <div class="text-sm text-gray-500">2024-01-05</div>
                </div>
                <div class="text-sm text-gray-500 mb-4">主持人：赵六 | 时长：2小时05分钟</div>
                <div class="text-sm mb-4">完成了与ABC公司的合同评审，法务部门提出了几点修改建议。</div>
                <div class="flex justify-between">
                  <div class="flex space-x-2">
                    <div class="px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">合同</div>
                    <div class="px-2 py-1 bg-gray-100 rounded text-xs text-gray-600">评审</div>
                  </div>
                  <button class="text-primary text-sm">查看详情</button>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>`;
    }
    
    // 活动模块内容
    function getActivityContent() {
      return `
      <div class="h-16 flex items-center justify-between px-6 border-b">
        <div class="flex items-center space-x-4">
          <span class="font-medium">发布活动</span>
        </div>
        <div class="flex items-center space-x-4">
          <button class="px-4 py-2 bg-primary text-white !rounded-button" onclick="showActivityList()">
            <i class="fas fa-check mr-2"></i>保存
          </button>
        </div>
      </div>
      <div class="flex-1 p-6 overflow-y-auto">
        <form class="max-w-2xl mx-auto space-y-6">
          <div class="space-y-2">
            <label class="block font-medium">活动名称</label>
            <input type="text" class="w-full px-4 py-2 border rounded-lg" placeholder="请输入活动名称">
          </div>
          <div class="space-y-2">
            <label class="block font-medium">活动分类</label>
            <div class="flex space-x-4">
              <label class="flex items-center space-x-2">
                <input type="radio" name="category" checked>
                <span>团建活动</span>
              </label>
              <label class="flex items-center space-x-2">
                <input type="radio" name="category">
                <span>培训讲座</span>
              </label>
              <label class="flex items-center space-x-2">
                <input type="radio" name="category">
                <span>庆祝活动</span>
              </label>
              <label class="flex items-center space-x-2">
                <input type="radio" name="category">
                <span>其他</span>
              </label>
            </div>
          </div>
          <div class="grid grid-cols-2 gap-4">
            <div class="space-y-2">
              <label class="block font-medium">开始时间</label>
              <input type="datetime-local" class="w-full px-4 py-2 border rounded-lg">
            </div>
            <div class="space-y-2">
              <label class="block font-medium">结束时间</label>
              <input type="datetime-local" class="w-full px-4 py-2 border rounded-lg">
            </div>
          </div>
          <div class="space-y-2">
            <label class="block font-medium">活动地点</label>
            <input type="text" class="w-full px-4 py-2 border rounded-lg" placeholder="请输入活动地点">
          </div>
          <div class="space-y-2">
            <label class="block font-medium">活动描述</label>
            <textarea class="w-full px-4 py-2 border rounded-lg h-32" placeholder="请描述活动内容和注意事项"></textarea>
          </div>
          <div class="space-y-2">
            <label class="block font-medium">参与人员</label>
            <div class="border rounded-lg p-4 space-y-4">
              <div class="flex items-center justify-between">
                <label class="flex items-center space-x-2">
                  <input type="checkbox" checked>
                  <span>全公司</span>
                </label>
                <span class="text-sm text-gray-500">120人</span>
              </div>
              <div>
                <label class="flex items-center space-x-2 mb-2">
                  <input type="checkbox">
                  <span>指定部门/人员</span>
                </label>
                <div class="flex flex-wrap gap-2 border p-2 rounded-lg">
                  <div class="flex items-center space-x-1 bg-gray-100 px-2 py-1 rounded">
                    <span class="text-sm" >市场部</span>
                    <button class="text-gray-500 text-xs">×</button>
                  </div>
                  <div class="flex items-center space-x-1 bg-gray-100 px-2 py-1 rounded">
                    <span class="text-sm">张三</span>
                    <button class="text-gray-500 text-xs">×</button>
                  </div>
                  <button class="text-primary text-sm">+ 添加</button>
                </div>
              </div>
            </div>
          </div>
          <div class="space-y-2">
            <label class="block font-medium">通知方式</label>
            <div class="flex space-x-4">
              <label class="flex items-center space-x-2">
                <input type="checkbox" checked>
                <span>应用内消息</span>
              </label>
              <label class="flex items-center space-x-2">
                <input type="checkbox" checked>
                <span>邮件通知</span>
              </label>
              <label class="flex items-center space-x-2">
                <input type="checkbox">
                <span>短信通知</span>
              </label>
            </div>
          </div>
          <div class="space-y-2">
            <label class="block font-medium">上传附件</label>
            <div class="border-dashed border-2 rounded-lg p-8 text-center">
              <i class="fas fa-cloud-upload-alt text-4xl text-gray-300 mb-2"></i>
              <div class="text-gray-500">点击或拖拽文件至此区域上传</div>
              <div class="text-xs text-gray-400 mt-1">支持图片、文档、压缩包等多种格式，单个文件不超过20MB</div>
            </div>
          </div>
        </form>
      </div>`;
    }
    
    
    // 文档中心模块内容
    function getDocumentsContent() {
      return `
      <div class="h-16 flex items-center justify-between px-6 border-b">
        <div class="flex items-center space-x-4">
          <span class="font-medium">文档中心</span>
        </div>
        <div class="flex items-center space-x-4">
          <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
            <i class="fas fa-search"></i>
          </button>
          <button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full" onclick="showCreateDocumentModal()">
            <i class="fas fa-plus"></i>
          </button>
        </div>
      </div>
      <div class="flex-1 p-6 overflow-y-auto">
        <div class="grid grid-cols-2 gap-4">
          <div class="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer" onclick="openDocumentEditor('2024年Q1营销策略报告.docx', 'word')">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center space-x-2">
                <i class="fas fa-file-word text-blue-500 text-xl"></i>
                <span class="font-medium">2024年Q1营销策略报告.docx</span>
              </div>
              <button class="text-gray-400 hover:text-gray-600" onclick="event.stopPropagation()">
                <i class="fas fa-ellipsis-v"></i>
              </button>
            </div>
            <div class="text-sm text-gray-500 mb-4">上次修改：2024-01-15 10:30</div>
            <div class="flex items-center space-x-2">
              <div class="flex -space-x-2">
                <div class="w-6 h-6 rounded-full border-2 border-white bg-blue-500"></div>
                <div class="w-6 h-6 rounded-full border-2 border-white bg-green-500"></div>
                <div class="w-6 h-6 rounded-full border-2 border-white bg-purple-500"></div>
              </div>
              <span class="text-sm text-gray-500">3人协作</span>
            </div>
          </div>
          <div class="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer" onclick="openDocumentEditor('新产品发布会演示文稿.pptx', 'powerpoint')">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center space-x-2">
                <i class="fas fa-file-powerpoint text-red-500 text-xl"></i>
                <span class="font-medium">新产品发布会演示文稿.pptx</span>
              </div>
              <button class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-ellipsis-v"></i>
              </button>
            </div>
            <div class="text-sm text-gray-500 mb-4">上次修改：2024-01-14 15:45</div>
            <div class="flex items-center space-x-2">
              <div class="flex -space-x-2">
                <div class="w-6 h-6 rounded-full border-2 border-white bg-yellow-500"></div>
                <div class="w-6 h-6 rounded-full border-2 border-white bg-pink-500"></div>
              </div>
              <span class="text-sm text-gray-500">2人协作</span>
            </div>
          </div>
          <div class="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer" onclick="openDocumentEditor('2023年度销售数据分析.xlsx', 'excel')">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center space-x-2">
                <i class="fas fa-file-excel text-green-500 text-xl"></i>
                <span class="font-medium">2023年度销售数据分析.xlsx</span>
              </div>
              <button class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-ellipsis-v"></i>
              </button>
            </div>
            <div class="text-sm text-gray-500 mb-4">上次修改：2024-01-13 09:15</div>
            <div class="flex items-center space-x-2">
              <div class="flex -space-x-2">
                <div class="w-6 h-6 rounded-full border-2 border-white bg-indigo-500"></div>
                <div class="w-6 h-6 rounded-full border-2 border-white bg-red-500"></div>
                <div class="w-6 h-6 rounded-full border-2 border-white bg-orange-500"></div>
              </div>
              <span class="text-sm text-gray-500">3人协作</span>
            </div>
          </div>
          <div class="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer" onclick="openDocumentEditor('市场调研报告终稿.pdf', 'pdf')">
            <div class="flex items-center justify-between mb-4">
              <div class="flex items-center space-x-2">
                <i class="fas fa-file-pdf text-red-600 text-xl"></i>
                <span class="font-medium">市场调研报告终稿.pdf</span>
              </div>
              <button class="text-gray-400 hover:text-gray-600">
                <i class="fas fa-ellipsis-v"></i>
              </button>
            </div>
            <div class="text-sm text-gray-500 mb-4">上次修改：2024-01-12 16:20</div>
            <div class="flex items-center space-x-2">
              <div class="flex -space-x-2">
                <div class="w-6 h-6 rounded-full border-2 border-white bg-teal-500"></div>
              </div>
              <span class="text-sm text-gray-500">1人协作</span>
            </div>
          </div>
        </div>
      </div>`;
    }
    
    // 初始化页面时设置默认选中状态
    window.onload = function() {
    changeModule('chat');
    showActivityList(); // 初始化显示活动列表
    loadChatList(); // 初始化加载聊天列表
    setTimeout(() => {
      const firstChatItem = document.querySelector('.chat-list-item');
      if (firstChatItem) {
        firstChatItem.click(); // 模拟点击第一个聊天
      }
    }, 100);
    }
    </script>
  

  
  <script>
    // 加载聊天列表函数(包括群聊和单聊)
    function loadChatList() {
      const chatListEl = document.getElementById('chat-list');
      chatListEl.innerHTML = ''; // 清空现有内容
      
      // 从本地存储获取令牌
      const accessToken = localStorage.getItem('access_token');
      const refreshToken = localStorage.getItem('refresh_token');
      
      if (!accessToken || !refreshToken) {
        chatListEl.innerHTML = '<div class="p-4 text-center">未检测到登录信息，请重新登录</div>';
        return;
      }
      
      // 创建用于存储所有聊天的数组
      let allChats = [];
      
      // 加载群聊列表
      loadGroupChats(accessToken, refreshToken).then(groups => {
        // 将群聊添加到所有聊天数组中，添加类型标记
        if (groups && Array.isArray(groups)) {
          groups.forEach(group => {
            allChats.push({
              ...group,
              chatType: 'group',
              displayTime: group.created_at // 用于排序的时间
            });
          });
        }
        
        // 加载单聊列表
        return loadPrivateChats(accessToken, refreshToken);
      }).then(privateChats => {
        // 将单聊添加到所有聊天数组中，添加类型标记
        if (privateChats && Array.isArray(privateChats)) {
          privateChats.forEach(chat => {
            allChats.push({
              ...chat,
              chatType: 'private',
              displayTime: chat.last_message_at || chat.created_at // 用于排序的时间
            });
          });
        }
        
        // 按最后消息时间排序（最新的在前面）
        allChats.sort((a, b) => {
          const timeA = new Date(a.displayTime);
          const timeB = new Date(b.displayTime);
          return timeB - timeA;
        });
        
        // 渲染所有聊天列表
        renderChatList(allChats);
            // 自动选中第一个聊天（如果有）
        setTimeout(() => {
          const firstChatItem = document.querySelector('.chat-list-item');
          if (firstChatItem) {
            firstChatItem.click(); // 模拟点击第一个聊天
          }
        }, 100);
      }).catch(error => {
        console.error('加载聊天列表失败:', error);
        chatListEl.innerHTML = '<div class="p-4 text-center">网络错误，无法加载聊天列表</div>';
      });
    }
    
    // 加载群聊数据
    function loadGroupChats(accessToken, refreshToken) {
      return fetch('http://localhost:3000/api/v1/chat/groups', {
        method: 'GET',
        headers: {
          'Access_token': accessToken,
          'Refresh_token': refreshToken
        }
      })
      .then(response => response.json())
      .then(data => {
        if (data.code === 200 && Array.isArray(data.data)) {
          return data.data;
        } else {
          console.error('获取群组列表失败:', data.message);
          return [];
        }
      });
    }
    
    // 加载单聊数据
    function loadPrivateChats(accessToken, refreshToken) {
      return fetch('http://localhost:3000/api/v1/chat/single-chat-list', {
        method: 'GET',
        headers: {
          'Access_token': accessToken,
          'Refresh_token': refreshToken
        }
      })
      .then(response => response.json())
      .then(data => {
        if (data.code === 200 && Array.isArray(data.data)) {
          return data.data;
        } else {
          console.error('获取单聊列表失败:', data.message);
          return [];
        }
      });
    }
    

    // 添加全局变量存储当前聊天会话ID
    let currentConversationId ; // 默认值为1
    // 渲染聊天列表
    function renderChatList(chats) {
      const chatListEl = document.getElementById('chat-list');
      
      if (chats.length === 0) {
        chatListEl.innerHTML = '<div class="p-4 text-center">暂无聊天记录</div>';
        return;
      }
      
      let chatListHTML = '';
      
      // 为每个聊天创建列表项
      chats.forEach((chat, index) => {
        // 设置背景色 - 群聊颜色更深
        const colors = {
          group: ['bg-blue-600', 'bg-green-600', 'bg-purple-600', 'bg-red-600', 'bg-yellow-600'],
          private: ['bg-blue-500', 'bg-green-500', 'bg-purple-500', 'bg-red-500', 'bg-yellow-500']
        };
        
        const colorSet = colors[chat.chatType];
        const bgColor = colorSet[index % colorSet.length];
        
        // 处理时间显示
        const displayDate = new Date(chat.displayTime);
        const timeStr = `${String(displayDate.getHours()).padStart(2, '0')}:${String(displayDate.getMinutes()).padStart(2, '0')}`;
        
        // 确定显示名称和头像文字
        let displayName, avatarText, description;
        
        if (chat.chatType === 'group') {
          displayName = chat.name;
          avatarText = chat.name.charAt(0);
          description = chat.description || '暂无描述...';
        } else {
          displayName = chat.peer_username;
          avatarText = chat.peer_username.charAt(0);
          description = '点击开始聊天...';
        }
        
        // 创建列表项
        const isActive = index === 0; // 第一个项目高亮显示
        const listItem = `
          <div class="chat-list-item p-4 cursor-pointer ${isActive ? 'bg-gray-800' : ''}" 
               data-chat-id="${chat.id}" 
               data-chat-type="${chat.chatType}">
            <div class="flex items-center space-x-3">
              <div class="w-10 h-10 rounded-full ${bgColor} flex items-center justify-center">
                <span class="text-sm">${avatarText}</span>
              </div>
              <div class="flex-1">
                <div class="flex justify-between">
                  <span class="chat-name">${displayName}</span>
                  <span class="text-xs text-gray-400">${timeStr}</span>
                </div>
                <div class="text-sm text-gray-400 truncate">${description}</div>
              </div>
            </div>
          </div>
        `;
        
        chatListHTML += listItem;
      });
      
      chatListEl.innerHTML = chatListHTML;
      
  // 添加点击事件处理 - 直接在这里添加事件，确保DOM已更新
  const chatItems = document.querySelectorAll('.chat-list-item');
  if (chatItems.length > 0) {
    chatItems.forEach(item => {
      item.addEventListener('click', function() {
        // 移除所有高亮
        document.querySelectorAll('.chat-list-item').forEach(i => {
          i.classList.remove('bg-gray-800');
        });
        // 添加高亮到当前项
        this.classList.add('bg-gray-800');
        
        // 获取聊天ID和类型
        const chatId = this.getAttribute('data-chat-id');
        const chatType = this.getAttribute('data-chat-type');
        
        // 更新当前会话ID
        currentConversationId = parseInt(chatId, 10);;
        
        console.log(`切换到聊天: ID=${chatId}, 类型=${chatType}`); // 调试信息

        const nameElement = this.querySelector('.chat-name');
        const chatName = nameElement ? nameElement.textContent : '';
        
        // 如果需要更新页面上显示的聊天名称
        const chatTitleElement = document.getElementById('group-name');
        if (chatTitleElement) {
          chatTitleElement.textContent = chatName;
        }
        
        // 加载对应的聊天消息
        loadChatMessages(chatId);
      });
    });
  } else {
    console.error('无法找到聊天列表项元素');
  }
}
    
    // 保存token的函数（登录成功后调用）
    function saveTokens(accessToken, refreshToken) {
      localStorage.setItem('access_token', accessToken);
      localStorage.setItem('refresh_token', refreshToken);
    }
    
    
    // 页面加载时调用函数
    document.addEventListener('DOMContentLoaded', function() {
      // 加载聊天列表
      loadChatList();
    });
  </script>

</head>
<body class="flex h-screen bg-gray-100">
<div class="sidebar flex flex-col text-white">
<div class="p-4 border-b border-gray-700 relative">
<div class="flex items-center space-x-3 relative">
<div class="w-10 h-10 rounded-full flex items-center justify-center cursor-pointer overflow-hidden">
<img src="https://image-resource.mastergo.com/155405551408239/155405551408242/bcacf5c8323e5cc7f07313ffff11acae.png" alt="user avatar" class="w-full h-full object-cover">
</div>
<div>
<div class="font-medium">陈经理</div>
<div class="text-sm text-gray-400">在线</div>
</div>
<div class="profile-popup">
<div class="user-info">
<div class="font-medium mb-1">陈经理</div>
<div class="text-sm text-gray-500">总经理室</div>
</div>
<button onclick="logout()" class="w-full text-left text-sm text-red-500 hover:text-red-600">
<i class="fas fa-sign-out-alt mr-2"></i>退出登录
</button>
</div>
</div>
<script>
function logout() {
window.location.href = '/logout';
}
</script>
<div class="profile-controls gap-1">
<button onclick="minimizeWindow()">
<i class="fas fa-minus text-xs"></i>
</button>
<button onclick="toggleFullScreen()">
<i class="fas fa-expand text-xs"></i>
</button>
<button onclick="closeWindow()">
<i class="fas fa-times text-xs"></i>
</button>
</div>
<script>
function minimizeWindow() {
window.innerWidth = 800;
window.innerHeight = 600;
}
function toggleFullScreen() {
if (!document.fullscreenElement) {
document.documentElement.requestFullscreen();
} else {
document.exitFullscreen();
}
}
function closeWindow() {
window.close();
}
</script>
</div>
<div class="flex border-b border-gray-700">
<button onclick="changeModule('chat')" class="flex-1 py-3 text-center hover:bg-gray-800" id="chatBtn">
<i class="fas fa-comment-dots mb-1"></i>
<div class="text-xs">聊天</div>
</button>
<button onclick="changeModule('doc')" class="flex-1 py-3 text-center hover:bg-gray-800" id="docBtn">
<i class="fas fa-file-alt mb-1"></i>
<div class="text-xs">文档</div>
</button>
<button onclick="changeModule('attendance')" class="flex-1 py-3 text-center hover:bg-gray-800" id="attendanceBtn">
<i class="fas fa-clock mb-1"></i>
<div class="text-xs">考勤</div>
</button>
<button onclick="changeModule('meeting')" class="flex-1 py-3 text-center hover:bg-gray-800" id="meetingBtn">
<i class="fas fa-video mb-1"></i>
<div class="text-xs">会议</div>
</button>
<button onclick="changeModule('activity')" class="flex-1 py-3 text-center hover:bg-gray-800" id="activityBtn">
<i class="fas fa-calendar-alt mb-1"></i>
<div class="text-xs">活动</div>
</button>
</div>

<div class="flex-1 overflow-y-auto" id="chat-list">
</div>
</div>
<div class="flex-1 flex flex-col bg-white">
<div class="h-16 flex items-center justify-between px-6 border-b">
<div class="flex items-center space-x-4">
<span class="font-medium">文档中心</span>
</div>
<div class="flex items-center space-x-4">
<button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full">
<i class="fas fa-search"></i>
</button>
<button class="p-2 text-gray-600 hover:bg-gray-100 rounded-full" onclick="showCreateDocumentModal()">
<i class="fas fa-plus"></i>
</button>
</div>
</div>
<div class="flex-1 p-6 overflow-y-auto">
<div class="grid grid-cols-2 gap-4">
<div class="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer" onclick="openDocumentEditor('2024年Q1营销策略报告.docx', 'word')">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<i class="fas fa-file-word text-blue-500 text-xl"></i>
<span class="font-medium">2024年Q1营销策略报告.docx</span>
</div>
<button class="text-gray-400 hover:text-gray-600" onclick="event.stopPropagation()">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
<div class="text-sm text-gray-500 mb-4">上次修改：2024-01-15 10:30</div>
<div class="flex items-center space-x-2">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-blue-500"></div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-green-500"></div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-purple-500"></div>
</div>
<span class="text-sm text-gray-500">3人协作</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer" onclick="openDocumentEditor('新产品发布会演示文稿.pptx', 'powerpoint')">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<i class="fas fa-file-powerpoint text-red-500 text-xl"></i>
<span class="font-medium">新产品发布会演示文稿.pptx</span>
</div>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
<div class="text-sm text-gray-500 mb-4">上次修改：2024-01-14 15:45</div>
<div class="flex items-center space-x-2">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-yellow-500"></div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-pink-500"></div>
</div>
<span class="text-sm text-gray-500">2人协作</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer" onclick="openDocumentEditor('2023年度销售数据分析.xlsx', 'excel')">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<i class="fas fa-file-excel text-green-500 text-xl"></i>
<span class="font-medium">2023年度销售数据分析.xlsx</span>
</div>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
<div class="text-sm text-gray-500 mb-4">上次修改：2024-01-13 09:15</div>
<div class="flex items-center space-x-2">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-indigo-500"></div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-red-500"></div>
<div class="w-6 h-6 rounded-full border-2 border-white bg-orange-500"></div>
</div>
<span class="text-sm text-gray-500">3人协作</span>
</div>
</div>
<div class="border rounded-lg p-4 hover:shadow-lg transition-shadow cursor-pointer" onclick="openDocumentEditor('市场调研报告终稿.pdf', 'pdf')">
<div class="flex items-center justify-between mb-4">
<div class="flex items-center space-x-2">
<i class="fas fa-file-pdf text-red-600 text-xl"></i>
<span class="font-medium">市场调研报告终稿.pdf</span>
</div>
<button class="text-gray-400 hover:text-gray-600">
<i class="fas fa-ellipsis-v"></i>
</button>
</div>
<div class="text-sm text-gray-500 mb-4">上次修改：2024-01-12 16:20</div>
<div class="flex items-center space-x-2">
<div class="flex -space-x-2">
<div class="w-6 h-6 rounded-full border-2 border-white bg-teal-500"></div>
</div>
<span class="text-sm text-gray-500">1人协作</span>
</div>
</div>
</div>
</div>
</div>
</body>
</html>
